import React, {Component} from 'react';
import {
  SafeAreaView,
  ImageBackground,
  StyleSheet,
  ScrollView,
  View,
  Text,
  StatusBar,
  TextInput,
} from 'react-native';

import {
  Header,
  LearnMoreLinks,
  Colors,
  DebugInstructions,
  ReloadInstructions,
} from 'react-native/Libraries/NewAppScreen';

import { Button, Input } from 'react-native-elements';
import {Actions} from 'react-native-router-flux';
import SocketIO from 'socket.io-client';
import Api from '../Api';

export default class MainScreen extends Component {

  constructor(props) {
    super(props);
    this.state = {};
  }

  async UNSAFE_componentWillReceiveProps(nextProps){
    const {user} = nextProps;
    if(user && !this.state.count) {
      const socket = SocketIO(Api.SOCKET_URL, {
        transports: ['websocket']
      });
      socket
        .on('connect', () => {
          socket.emit('join', 'notify', (err, room) => {
            Object.keys(room.clients).forEach(function (id) {
              socket.emit('message', {
                to: id,
                from: socket.id,
                broadcaster: socket.id,
                type: 'username',
                roomType: 'message',
                playroad: {
                  username: user.username
                }
              });
            });
          });
        })
        .on('message', (msg) => {
          if (msg.type == 'usernames') {
            this.hoster = msg.from;
            socket.emit('message', {
                to: this.hoster,
                from: socket.id,
                broadcaster: socket.id,
                type: 'username',
                roomType: 'message',
                playroad: {
                  username: nextProps.user.username
                }
              });
          }
        });
      const count = await this.updateCount();
      this.setState({socket, count});
      // return {socket, count};
    }
    // return null;
  }

  componentWiiUmount() {
    const {socket} = this.state;
    socket.emit('message', {
        to: this.hoster,
        from: socket.id,
        broadcaster: socket.id,
        type: 'logout',
        roomType: 'message',
      });
  }

  async updateCount() {
    const data = await Api.worksheetcount();
    let count = {};
    if (data) {
      for (var i = 0; i < data.length; i++) {
        count[data[i].status + ''] = data[i].count
      }
    }
    return count;
  }

  async componentDidMount() {
    const count = await this.updateCount();
    if (!count.status) {
      this.setState({
        count,
      });
    }
  }

  render() {
    return (
      <View>
        <StatusBar barStyle="light-content" backgroundColor="#000000"/>
        <SafeAreaView style={{
          height: '100%',
        }}>
          <ImageBackground source={{
            uri: 'https://www.shyuezheng.com/static/img/background.655e545.png'
          }}
          style={{
            flex: 1,
            backgroundColor: '#00000033'
          }}>
            <View style={{
              flex: 4,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
              <View style={{
                borderWidth: 2,
                borderColor: '#FFFFFF',
                padding: 10,
                borderColor: '#FFFFFF',
                paddingHorizontal: 60,
              }}>
                <Text style={{
                  textAlign: 'center',
                  fontSize: 30,
                  color: Colors.light
                }}>{this.state.count ? this.state.count['700'] ? this.state.count['700'] : '0' : '0'}</Text>
                <Text style={{
                  textAlign: 'center',
                  fontSize: 20,
                  color: Colors.light
                }}>已结单</Text>
                <Text style={{
                  textAlign: 'center',
                  fontSize: 30,
                  color: Colors.light
                }}>{this.state.count ? this.state.count['200'] ? this.state.count['200'] : '0' : '0'}</Text>
                <Text style={{
                  textAlign: 'center',
                  fontSize: 20,
                  color: Colors.light
                }}>待接单</Text>
              </View>
            </View>
            <View style={{
              flex: 1,
              justifyContent: 'center',
              alignItems: 'center',
            }}>
              <Text style={{
                color: Colors.white,
                borderWidth: 1,
                padding: 10,
                borderColor: Colors.white,
                paddingHorizontal: 60,
                borderRadius: 20
              }}>我的工单</Text>
            </View>
          </ImageBackground>
          <View style={{
            flex:1,
          }}>
            <View style={{
              flexDirection: 'row',
              flex: 1,
            }}>
              <View style={{
                flex: 1,
              }}>
                <Button
                  title="代报修"
                  icon={{
                    name: 'tools',
                    type: 'font-awesome-5',
                    color: '#1faffa',
                    reverse: true
                  }}
                  titleStyle={{
                    color: Colors.dark,
                    height: 20,
                  }}
                  buttonStyle={{
                    backgroundColor: 'transparent',
                    flex: 1,
                    flexDirection: 'column',
                  }}
                  containerStyle={{
                    flex: 1,
                    borderRightWidth: 1,
                    borderBottomWidth: 1,
                    borderColor: Colors.light,
                    justifyContent: 'center'
                  }}
                  onPress={() => {
                    Actions.addSheet();
                  }}
                />
                <Button
                  title="运维助手"
                  icon={{
                    name: 'smile',
                    type: 'font-awesome-5',
                    reverse: true,
                    color: '#fca929'
                  }}
                  titleStyle={{
                    color: Colors.dark,
                    height: 20,
                  }}
                  buttonStyle={{
                    backgroundColor: 'transparent',
                    flex: 1,
                    flexDirection: 'column',
                  }}
                  containerStyle={{
                    flex: 1,
                    borderTopWidth: 1,
                    borderRightWidth: 1,
                    borderColor: Colors.light,
                    justifyContent: 'center'
                  }}
                  onPress={() => {
                    Actions.video({room: this.state.socket.id});
                  }}
                />
              </View>
              <View style={{
                flex: 1,
              }}>
                <Button
                  title="工单管理"
                  icon={{
                    name: 'clipboard',
                    type: 'font-awesome-5',
                    color: '#28d4a7',
                    reverse: true
                  }}
                  titleStyle={{
                    color: Colors.dark,
                    height: 20,
                  }}
                  buttonStyle={{
                    backgroundColor: 'transparent',
                    flex: 1,
                    flexDirection: 'column',
                  }}
                  containerStyle={{
                    flex: 1,
                    borderLeftWidth: 1,
                    borderBottomWidth: 1,
                    borderColor: Colors.light,
                    justifyContent: 'center'
                  }}
                  onPress={() => {
                    Actions.group({
                      count: this.state.count
                    });
                  }}
                />
                <Button
                  title="统计分析"
                  icon={{
                    name: 'chart-line',
                    type: 'font-awesome-5',
                    reverse: true,
                    color: '#fc9069'
                  }}
                  titleStyle={{
                    color: Colors.dark,
                    height: 20,
                  }}
                  buttonStyle={{
                    backgroundColor: 'transparent',
                    flex: 1,
                    flexDirection: 'column',
                  }}
                  containerStyle={{
                    flex: 1,
                    borderLeftWidth: 1,
                    borderTopWidth: 1,
                    borderColor: Colors.light,
                    justifyContent: 'center'
                  }}
                />
              </View>
            </View>
          </View>
        </SafeAreaView>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  scrollView: {
    backgroundColor: Colors.lighter,
  },
  engine: {
    position: 'absolute',
    right: 0,
  },
  body: {
    backgroundColor: Colors.white,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  sectionTitle: {
    fontSize: 24,
    fontWeight: '600',
    color: Colors.black,
  },
  sectionDescription: {
    marginTop: 8,
    fontSize: 18,
    fontWeight: '400',
    color: Colors.dark,
  },
  highlight: {
    fontWeight: '700',
  },
  footer: {
    color: Colors.dark,
    fontSize: 12,
    fontWeight: '600',
    padding: 4,
    paddingRight: 12,
    textAlign: 'right',
  },
  textInput: {
    color: Colors.dark,
    backgroundColor: Colors.white,
    alignSelf: 'center',
    width: '80%',
    padding: 10,
    marginBottom: 10,
  }
});
